<template>
    <div class="body">
        <div class="main">
            <div class="form">
                <h4><img src="@/assets/icon_class.png" tppabs="images/icon_class.png">申请人查询 <span>Applicant inquiry</span></h4>
                <div class="item">
                    <span>商标类型：</span>
                    <div class="label">
                        <label :class="radio == 1 ? 'on' : ''" @click="onRadio(1)">中文</label>
                        <label :class="radio == 2 ? 'on' : ''" @click="onRadio(2)">英文</label>
                        <label :class="radio == 3 ? 'on' : ''" @click="onRadio(3)">数字</label>
                        <label :class="radio == 4 ? 'on' : ''" @click="onRadio(4)">图形</label>
                        <label :class="radio == 5 ? 'on' : ''" @click="onRadio(5)">中文+英文</label>
                    </div>
                </div>
                <div class="item">
                    <span>近似条件：</span>
                    <div class="check">
                        <a class="all" :class="allSelect ? 'on' : ''" @click="toggleAll">全选/取消</a>
                        <ul class="list">
                            <li v-for="(group, index) in checkOpts" :key="index">
                                <a v-for="(item, idx) in group" :key="idx" :class="item.checked ? 'on' : ''" @click="toggleChecked(index, idx)">{{
                                    item.name }}</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="item">
                    <span>查询行业：</span>
                    <input v-model="form.hy" type="text" class="input sshy" placeholder="请输入商标所属行业">
                </div>
                <div class="item">
                    <span><i>*</i>申请人：</span>
                    <input v-model="form.name" type="text" class="input sbmc" placeholder="请输入您想要查询的商标名称">
                </div>
                <div class="bar">
                    <el-button style="width: 150px; height: 50px;" class="reset" @click="reset">重置条件</el-button>
                    <el-button style="width: 150px; height: 50px;" type="primary" class="submit" @click="showModal(3)">免费查询</el-button>
                </div>
                <div class="tip">* 注：<span>2022年的商标数据存在部分延迟，可点击此处</span> <a class="swtLink">人工窗口&gt;&gt;</a>
                    <span>免费二次核实</span></div>
            </div>
        </div>
        <div class="operate">
            <a class="get" @click="showModal(1)">
                <img src="@/assets/icon_red.png" tppabs="images/icon_red.png">
                <span>免费获取行业注册方案</span>
            </a>
            <a class="down" @click="showModal(2)">
                <img src="@/assets/icon_blue.png" tppabs="images/icon_blue.png">
                <span>尼斯分类表下载</span>
            </a>
        </div>
    </div>
</template>

<script setup>
import { reactive, ref } from 'vue'

const emits = defineEmits(['change'])

const form = ref({
    name: '',
    hy: ''
})
const radio = ref(1)
const allSelect = ref(true)
const checkOpts = reactive([
    [
        { name: '完全相同', checked: true },
        { name: '部分相同', checked: true },
        { name: '字符改变', checked: true }
    ],
    [
        { name: '加字符', checked: true },
        { name: '减字符', checked: true },
        { name: '顺序颠倒', checked: true }
    ],
    [
        { name: '含在其他商标中', checked: true },
        { name: '内含其它商标', checked: true },
        { name: '读音相同', checked: true }
    ]
])

const toggleChecked = (groupIndex, itemIndex) => {
    const item = checkOpts[groupIndex][itemIndex]
    item.checked = !item.checked
}
const toggleAll = () => {
    allSelect.value = !allSelect.value
    checkOpts.forEach(group => {
        group.forEach(item => {
            item.checked = allSelect.value
        })
    })
}

const reset = () => {
    form.value = {
        name: '',
        hy: ''
    }
}
const showModal = type => {
    emits('change', { type, data: form.value })
}
</script>